<route lang="jsonc" type="page">
    {
      "style": {
			"navigationStyle": "custom",
			"navigationBarTitleText": "我的次卡"
		}
    }
</route>
<template>
	<view class="card-page" :style="{ marginTop: `${safeAreaInsets?.top}px` }">
		<header-navbar title="我的次卡" />
		
		<view
			v-for="(item, index) in cardList"
			:key="index"
			class="card-item">
			<view class="cell-item border">
				<view class="cell-item_center">{{ item.settingsCard.name }}</view>
			</view>
			
			<view class="card-content">
				<view
					class="flex-between"
				>
					<view class="label">总次数</view>
					<view class="num">{{ item.total }}</view>
				</view>
				<view
					class="flex-between"
				>
					<view class="label">剩余次数</view>
					<view class="have_num">{{ item.count }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import HeaderNavbar from '@/pages/components/header-navbar.vue';
	import { useSafeAreaInsets } from '@/mixins/basic'
	import { ref } from 'vue';
	import { onShow } from '@dcloudio/uni-app';
	import { useUserStore } from '@/store/user'

	defineOptions({
		name: 'Card',
	})
	const userStore = useUserStore()
	const { safeAreaInsets } = useSafeAreaInsets()
	
	const cardList = ref([])
	
	onShow(() => {
		cardList.value = userStore.userCardInfo
	})
</script>

<style lang="scss" scoped>
	.card-page {
		padding: 50px 26px 24px 26px;
		.card-item {
			background-color: #fff;
			
			.card-content {
				padding: 15px 16px;
				
				> .flex-between {
					font-size: 16px;
					font-weight: 500;
					line-height: 20px;
					
					& + .flex-between {
						padding-top: 15px;
					}

					.label {
						color: #989898;
					}
					
					.num {
						color: #23282C;
					}
					
					.have_num {
						color: $uni-tabbar-color;
					}
				}
			}
		}
	}
</style>